<template>
  <view class="login">
    <navBar
      title="阿特拉斯卡友之家"
      custom-back
      :show-home="false"
      @back="toPhoneLogin"
      @home="toIndex">
    </navBar>
    
    <view class="welcome" :style="{marginTop: `${getSystemInfo.navBarHeight}px`}">
      <text>您好</text>
      <text>欢迎使用阿特拉斯卡友之家</text>
    </view>

    <view class="form-body">
      <u--form labelPosition="left" label-width="60px" ref="formRef" :model="formData">
        <!-- 手机号 -->
        <u-form-item label="手机号" prop="username">
          <u-input
            class="f-input"
            type="number"
            border="bottom"
            placeholder="请输入手机号"
            clearable
            v-model="formData.username"
          />
        </u-form-item>
        <!-- 密码 -->
        <u-form-item label="密码" prop="password">
          <u-input
            placeholder="请输入密码"
            border="bottom"
            :password="lockPassword"
            v-model="formData.password"
          >
            <template slot="suffix">
              <u-icon
                name="eye-off"
                :name="lockPassword ? 'eye-off' : 'eye'"
                color="#666"
                size="42"
                @click="lockPassword = !lockPassword">
              </u-icon>
            </template>
          </u-input>
        </u-form-item>
        
        <view class="agreement">
          <view class="pt2">
            <u-checkbox-group size="18px" icon-size="14px" shape="circle" v-model="agree">
              <u-checkbox name="agree"></u-checkbox>
            </u-checkbox-group>
          </view>
          <view>
            我已阅读并同意<text class="a-name" @click="onKyzjServiceProtocol">《卡友之家服务协议》</text>
            和<text class="a-name" @click="onKyzjPrivacyPolicy">《卡友之家隐私政策》</text>
          </view>
        </view>
        
        <u-button
          type="primary"
          text="登录"
          :disabled="loading || agree[0] !== 'agree'"
          @click="onLogin">
        </u-button>
      </u--form>
      
      <view class="text-links">
        <text @click="toPhoneLogin">手机登录</text>
        <text @click="toForgotPassword">忘记密码</text>
      </view>
    </view>
    
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import loginMixin from '@/mixins/login'
  import navBar from '@/components/navBar.vue'
  import { mapGetters } from 'vuex'
  
  export default {
    mixins: [loginMixin],
    components: { navBar },
    data() {
      return {
        formData: {
          username: '',
          password: ''
        },
        
        // 提交中
        loading: false,
        
        // 是否同意
        agree: [],
        
        // 验证规则
        rules: {
          username: [
            {
              required: true, 
              message: '请输入手机号',
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change','blur'],
            }
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
            }
          ]
        },
        
        // 密码可见
        lockPassword: true,
        pageDeviceId: 'e5ceb0ab-951d-bc32-f4e4-025aa1b5924a'
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
    },
    methods: {
      // 登录
      async onLogin() {
        if (this.loading) return
        await this.$refs.formRef.validate()
        try {
          this.loading = true
          const { formData } = this
          await this.loginForPassword({
            ...formData,
            deviceId: this.pageDeviceId,
            tenantId: 'miniapp'
          })
          await this.getUserInfoFn()
          this.toIndex()
          uni.$emit('refreshIndex','login')
        } catch (err) {
          this.$refs.uToast.show({
            message: err.respMsg || '登录失败',
            position: 'top'
          })
        } finally {
          this.loading = false
        }
      }
    },
    onLoad(params) {
      if (params && params.phone) {
        this.formData.username = params.phone
      }
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    // 分享
    onShareAppMessage(){
      return {
        title: '阿特拉斯卡友之家',
      }
    },
    onShareTimeline() {
      return {
        title: '阿特拉斯卡友之家',
      }
    },
  }
</script>

<style scoped lang="scss">
  .login {
    padding: 140rpx 65rpx 0;
    height: 100vh;
    background: #fff;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    
    /deep/ .nav-bar {
      .action {
        right: 7px;
      }
      .a-title {
        position: absolute;
        transform: translateX(-50%);
      }
    }

    .welcome {
      display: flex;
      flex-direction: column;
      font-size: 48rpx;
      line-height: 2;
    }
    
    .agreement {
      display: flex;
      flex-direction: row;
      font-size: 14px;
      line-height: 1.5;
      margin: 20rpx 0 50rpx;
      .a-name {
        color: $uni-primary;
      }
    }
    
    .text-links {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 14px;
      margin-top: 45rpx;
    }
  }
</style>